<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>reg_2</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			header.mui-bar .mui-icon {
				font-size: 18px;
				padding-top: 13px;
				padding-bottom: 13px;
				color: #333;
			}
			
			.mui-row {
				margin: 10px 0 20px 0;
				background-color: white;
			}
			
			li {
				list-style: none;
			}
			
			.mui-row .mui-table-view-cell a {
				color: gray;
			}
			.mui-row .mui-col-sm-4:nth-child(2) a{
				color: #333;
			}
			 
			input[type=color],
			input[type=date],
			input[type=datetime-local],
			input[type=datetime],
			input[type=email],
			input[type=month],
			input[type=number],
			input[type=password],
			input[type=search],
			input[type=tel],
			input[type=text],
			input[type=time],
			input[type=url],
			input[type=week],
			select,
			textarea {
				height: 50px;
			}
			.mui-input-row label a {
				text-decoration: underline;
				color: #333;
			}
			.mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
				top: 8px;
			}
			.mui-input-row a{
				display: inline-block;
				position: absolute;
				right: 12px;
				line-height: 50px;
				top: 0;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-pull-left">注册</a>
		</header>
		<div class="mui-content">
			<div class="mui-row">
				<div class="mui-col-sm-4">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							1 输入手机号
						</a>
					</li>
				</div>
				<div class="mui-col-sm-4">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							2 输入验证码
						</a>
					</li>
				</div>
				<div class="mui-col-sm-4">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							3 设置密码
						</a>
					</li>
				</div>
			</div>
			<!--<form action="" method="">-->
				<div class="mui-input-row">
					<input type="text" class="mui-input" placeholder="请输入短信验证码">
					<a href="javascript:;" data-phone="15111111111" data-disabled='false'>获取验证码</a>
				</div>
				<div class="mui-content-padded">
					<button id='reg3' class="mui-btn mui-btn-block mui-btn-primary">提交验证码</button>
				</div>
			<!--</form>-->
		</div>
	</body>
	<script type="text/javascript">
		mui.init()
		mui('.mui-input-row').on('tap','a[data-disabled="false"]',function(){
			mui.toast('发送成功');
			var time = 50;
			(function timeD(){
				setTimeout(function(){
					if (time < 0) {
						mui('.mui-input-row a')[0].innerHTML = '获取验证码';	
						mui('.mui-input-row a')[0].setAttribute('data-disabled','false');
						return false;
					} else{
						mui('.mui-input-row a')[0].innerHTML = time+'s 后重新获取';
						mui('.mui-input-row a')[0].setAttribute('data-disabled','true');
						timeD();
					}
					time--;
				},1000)
			})();
		})
		document.getElementById("reg3").addEventListener('tap',function () {
			mui.openWindow({
				url:"reg3.html",
				id:"reg3.html",
				show:{
					autoShow:true,
					aniShow:'auto'
				},
				waiting:{
					autoShow:true,
					title:'正在加载...'
				}
			})
		})
	</script>
</html>